<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>simple-vue</title>
    <link rel="stylesheet" href="http://hongweizhiyuan.oss-cn-hangzhou.aliyuncs.com/layui/css/layui.css"/>

</head>
<body style="background: #EEEEEE;">
<div class="vue-ajax">
    <h1>{{ posts.category }}</h1>
    <ul v-for="item in posts.article">
        <li>{{ item.title }}</li>
        <li>{{ item.author }}</li>
    </ul>
</div>


</div>


<blockquote class="layui-elem-quote layui-text">
    鉴于小伙伴的普遍反馈，先温馨提醒两个常见“问题”：1. <a href="/doc/base/faq.html#form" target="_blank">为什么select/checkbox/radio没显示？</a> 2. <a
        href="/doc/modules/form.html#render" target="_blank">动态添加的表单元素如何更新？</a>
</blockquote>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>表单集合演示</legend>
</fieldset>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">单行输入框</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">验证必填项</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">验证手机</label>
            <div class="layui-input-inline">
                <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">验证邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">单行选择框</label>
        <div class="layui-input-block">
            <select name="interest" lay-filter="aihao">
                <option value=""></option>
                <option value="0">写作</option>
                <option value="1" selected="">阅读</option>
                <option value="2">游戏</option>
                <option value="3">音乐</option>
                <option value="4">旅行</option>
            </select>
        </div>
    </div>
</form>

<script src="http://hongweizhiyuan.oss-cn-hangzhou.aliyuncs.com/layui/layui.all.js"></script>
<script src="js/vue.1.0.24.js"></script>
<script src="js/vue-resource.0.7.0.js"></script>
<script>



    ;!function () {
        var layer = layui.layer
            , form = layui.form;

        // ajax 获取数据
        var vm2 = new Vue({
            el: '.vue-ajax',
            data: {
                posts: {}
            },
            create:function(){
                from.render();
            },
            // 页面加载的时候会自动执行ready
            ready: function () {
                // 等同于jquery的$.get()
                this.$http.get('data.php').then(function (response) {
                    //window.layer.msg('hello');
                    console.log(response);
                    this.posts = response.data;
                })
            }
        });
        form.on('select(aihao)', function (data) {
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
        });
        //layer.msg('Hello World');
    }();
</script>
</body>
</html>
